<template>
  <div id="app">
    <div class="class-box">
      <title-com>
        <div class="btn" @click="goRouter()">发布招聘</div>
      </title-com>
      <div class="search-box">
        <input
          type="text"
          name=""
          id=""
          placeholder="实习生招聘"
          v-model="data.select.jobName"
        />
        <img src="../assets/search.png" @click="getJobList" alt="" />
      </div>
      <div class="content">
        <div class="select-box" v-for="i in selectKey" :key="i.key">
          <span>{{ i.name }}</span>
          <span class="select-key" :class="{ active: !data.select[i.ipt] }"
            >不限</span
          >
          <span
            class="select-key"
            :class="{ active: data.select[i.ipt] === s }"
            v-for="(s, index) in data.options[getKey(i)]"
            :key="index"
            @click="getSelectData(i.ipt, s)"
            >{{ s }}</span
          >
        </div>
        <div class="job-box" v-for="(i, index) in data.jobs" :key="index">
          <div class="job-left">
            <h3>{{ i.jobName }}</h3>
            <div class="money">{{ i.payMin + "K-" + i.payMax + "K" }}</div>
            <div>
              <span
                v-for="(s, index) in getWelfare(i.welfare)"
                :key="index"
                class="welfare"
                >{{ s }}</span
              >
            </div>
          </div>
          <div class="job-mid">
            <div>{{ i.companyName }}</div>
            <div class="city">{{ i.workPosition }}</div>
            <div class="time">{{ i.publishTime }}</div>
          </div>
          <div class="job-right">申请</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";
import TitleCom from "../components/TitleCom.vue";
import { selectKeyType, InitData } from "../types/index";
import { getJob, getRequiement } from "../http/job";
import { useRouter } from "vue-router";
export default defineComponent({
  components: { TitleCom },
  setup() {
    const router = useRouter();
    const data = reactive(new InitData());
    onMounted(() => {
      getJob({}).then((res: any) => {
        data.jobs = res.data;
      });
      getRequiement().then((res: any) => {
        data.options = res.data;
      });
    });
    const selectKey: Array<selectKeyType> = [
      {
        key: "WorkingYears",
        name: "工作经验",
        ipt: "workingYears",
      },
      {
        key: "PayMonths",
        name: "薪次",
        ipt: "payMonths",
      },

      {
        key: "PayArea",
        name: "薪资",
        ipt: "payArea",
      },
    ];
    const getKey = (o: selectKeyType): keyof typeof data.options => {
      let k: string = o.key;
      return k as any;
    };
    const getWelfare = (k: string) => {
      return k.split(",");
    };
    const getSelectData = (k: string, v: string) => {
      data.select[k] = v;
      getJobList(data.select);
    };
    const getJobList = (httpData: any): void => {
      getJob(httpData).then((res: any) => {
        data.jobs = res.data;
      });
    };
    const goRouter = () => {
      router.push("./release");
    };
    return {
      selectKey,
      data,
      getKey,
      getWelfare,
      goRouter,
      getSelectData,
      getJobList,
    };
  },
});
</script>
<style scoped lang="less">
// #app {
//   margin: 0;
//   padding: 0;
// }
.class-box {
  width: 1000px;
  margin: 0 auto;
  box-shadow: 10px 10px 15px #999;
  .btn {
    cursor: pointer;
    color: cadetblue;
    border: 2px solid cadetblue;
    border-radius: 10px;
    padding: 10px 18px;
  }
  .search-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0 10px;
    margin: 30px auto;
    input {
      display: flex;
      flex: 1;
      height: 33px;
      outline: none;
      border: none;
      padding-left: 10px;
    }
    img {
      width: 30px;
      height: 30px;
    }
  }
  .content {
    .select-box {
      width: calc(80% + 20px);
      text-align: left;
      font-size: 13px;
      margin: 5px auto;
      .select-key {
        cursor: pointer;
        margin-left: 5px;
      }
      .active {
        color: cadetblue;
      }
    }
    .job-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #999;
      padding: 10px 20px;

      .job-left {
        min-width: 180px;
        text-align: left;
        h3 {
          margin: 0;
          padding: 0;
        }
        .money {
          color: rgb(214, 181, 151);
          margin: 5px 0;
        }
        .welfare {
          font-size: 12px;
          background-color: rgb(237, 237, 237);
          border-radius: 10px;
          padding: 4px 10px;
          margin-right: 5px;
        }
      }
      .job-mid {
        width: 200px;
        .city,
        .time {
          color: #999;
          font-size: 13px;
          margin-top: 5px;
        }
      }
      .job-right {
        color: #fff;
        font-size: 12px;
        background-color: rgb(1, 100, 231);
        border-radius: 20px;
        padding: 4px 20px;
      }
    }
  }
}
</style>
